<template>
  <div id="past-ten-days"></div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import * as echarts from 'echarts';

interface Props {
  data: any;
}
const prop = withDefaults(defineProps<Props>(), {
  data: () => [],
});

let myChart: any = null;

const seriesData = ref([] as any[]);
const xAxisData = ref([] as any[]);

const option: any = reactive({
  grid: {
    x: 50, // 左
    y: 25, // 上
    x2: 30, // 右
    y2: 35, // 下
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // type: 'cross',
      label: {
        backgroundColor: '#F29B76',
      },
    },
  },
  xAxis: {
    type: 'category',
    // boundaryGap: false,
    axisLabel: {
      interval: 0,
      color: '#8BBDFE',
      fontSize: 7,
    },
    data: [],
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      interval: 0,
      color: '#ffffff',
      fontSize: 8,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['rgba(126,206,244,0.2)'],
      },
    },
  },
  series: [
    {
      name: '充电度数',
      type: 'line',
      symbol: 'none',
      lineStyle: {
        color: '#28F2E6', //改变折线颜色
        width: 1,
      },
      areaStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(122,238,255,0.7)', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(122,238,255,0.01)', // 100% 处的颜色
            },
          ],
        },
      },
      data: [],
    },
  ],
});

watch(
  () => prop.data,
  (newVal, oldVal) => {
    // console.log('pastTen', newVal, oldVal);
    seriesData.value = [];
    xAxisData.value = [];
    newVal.forEach((item: any) => {
      seriesData.value.push(item.totalPower);
      xAxisData.value.push(item.orderCloseTime);
    });
    option.series[0].data = seriesData.value;
    option.xAxis.data = xAxisData.value;
    myChart.setOption(option, true);
  }
);

onMounted(() => {
  const chartDom = document.getElementById('past-ten-days');
  myChart = echarts.init(chartDom as HTMLElement);
});
</script>
<style lang="scss" scoped>
#past-ten-days {
  width: 100%;
  height: 100%;
}
</style>